<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    {{name}}
 <!--为元素绑定事件 v-on-->
    <button v-on:click="show()">点击我弹出信息</button>
    <!--没有参数的情况下可以省略括号-->
    <button v-on:click="show">点击我弹出信息</button>

    <!--简写
    事件的写法：@事件名="函数"
    -->
    <button @click="show">点击我弹出信息</button>
    <hr>
    <!--事件的修饰符-->
    <!--
    prevent当执行事件时 阻止标签原来的默认行为
    once 只能触发一次
    stop 阻止事件冒泡
    -->
    <a href="http://www.baidu.com" @click.prevent="show">走你</a>
<!--    <a href="javascript:void(0);" @click="show">走你</a>-->
    <hr>
    <button @click.once="show">点我</button>
    <hr>

    <div @click="show" style="width: 100px; height: 100px; background-color: red">
        <button @click.stop="show">我是按钮</button>
    </div>

</div>

</body>
</html>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                name:'张三',
            }
        },
        //还有很多配置项
        methods:{
            //专门用来配置Vue函数
            show() {
                this.name='李四';
                alert("你好");
                console.log(this.name)
            }
        }
    });

</script>